<!--
 * @Author: LiuYan
 * @Date: 2022-09-07 16:15:19
 * @LastEditors: LiuYan
 * @LastEditTime: 2022-11-13 15:48:53
 * @Description: 数字翻牌
-->
<template>
  {{ num }}
</template>
<script setup>
import { onBeforeUnmount, reactive, toRefs } from "vue";
import anime from "animejs";
const props = defineProps({
  num: {
    type: Number,
    default: 0,
  },
  mm: {
    type: Number,
    default: 3000,
  },
  toFixed: {
    type: Number,
    default: 0,
  },
});
class TurnOver {
  constructor() {
    this.data = reactive({
      num: 0,
      array: [],
    });
    this.init();
  }
  init() {
    let battery = {
      num: 0,
    };
    anime({
      targets: battery,
      num: props.num,
      duration: props.mm,
      easing: "linear",
      update: () => {
        this.data.num = battery.num.toFixed(props.toFixed);
      },
    });
  }
}
let to = new TurnOver();
const { num } = toRefs(to.data);
onBeforeUnmount(() => {
  to = null;
});
</script>
